{extend name="template/base_default"}
{block name="header"}

<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<script src="__JS__/updown.js"></script>
<script src="__JS__/lazyimg.js"></script>
<style>

    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        display:inline-block;
        text-align: center;
        color:#eeeeee;
        width: 100%;
        background-attachment: fixed;
    }
    .v-head{
        margin: auto;
        position:fixed;
        width: 100%;
        z-index: 100;

    }
    li{
        list-style: none;
        text-align: center;
    }
    .v-body{
        margin-top: 100px;
        z-index: -1;
    }
    .jf{
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    .score{
        width:50%;
        overflow: hidden;
        word-break: break-all;
        height:1em;
    }
    .jf img{
        height: 20px;
        width: 20px;
        vertical-align: sub;
    }
    .jf p{
        height: 20px;

    }
    .titleList ul{
        border-radius: 25px;

        width:95%;
        margin: auto 2.5%;
        background-color: rgba(255, 255, 255, 0.1);
        text-align: center;
    }
    .lileft{
        float:left;
        height:auto;
        min-height:40px;
        color:#eeeeee;
        border: 1px solid #dddddd;
        font-size:16px;
        border-radius: 25px 0 0 25px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .liright{
        float:left;
        height:auto;
        min-height:40px;
        border: 1px solid #dddddd;
        color:#eeeeee;
        border-radius: 0 25px 25px 0;
        font-size:16px;
        width:49%;
        text-align: center;
        line-height: 40px;
        list-style-type:none;
    }
    .selected{
        background-color: rgba(255, 255, 255, 0.3);
    }
    .dropload-down1{

    }
    .dropload-down2{

    }
    .textItem{
        padding-left: 10px;
        margin-top: 26px;
        width:90%;
        height:110px;
        background-color: rgba(255, 255, 255, 0.7);
        margin-left: auto;
        margin-right: auto;
        color:#545454;
        border-radius: 10px;
        text-align: left;
        margin-top: 16px;
    }
    .textItem ul li{
        margin-top: 10px;
        text-align: left;
        float: left;
        width: 90%;
    }

    .block{
        height:50px;
        width:100%;

    }
    .v-head{
        background-color: #010C1D;
        height:90px;
    }
    .dropload-noData{

    }

    .tixian{
        position: fixed;
        bottom: 0;
        width:100%;
        height:40px;
        background-color: #00a0e9;
        color: white;
        text-align: center;
        line-height: 40px;
    }
</style>
{/block}
{block name="body"}
<div class="v-head">

    <div class="jf">
        <img src="__IMG__/jifens.png">
        <span>我的收入：<span class="score">{$score/100}</span></span>
    </div>
    <div style="background-color: #010C1D">
    <div  class="titleList" style="width: 100%; padding:auto;margin-top: 10px">
        <ul >
            <li id="one" class="lileft selected">我的收入</li>
            <li class="liright">我的支出</li>
        </ul>
    </div>
    </div>
    <div class="block"></div>
</div>
<div style="height:20px;margin-left: auto;margin-right: auto">
<div class="v-body">

    <div id="myincome"  class="myincome">

    </div>

    <div id="pay" class="pay" style="display:none;">

    </div>

</div>
    <a href="{:url('user/tixian')}">
    <div class="tixian">
        收入提现
    </div>
    </a>
{/block}
{block name="footer"}
<script type="text/javascript" src="__JS__/public.js"></script>
<script>
    var type = '#myincome';
    var doClss ='dropload-down1';
    //  var page = 0;
    var dp = 0;
    var zp = 0;
    $(document).ready(function(){
        $('#one').trigger('click');
    });
    $(".titleList li").click(
            function buttomClick(){
                if(!$(this).hasClass('selected')){
                    $(this).addClass('selected');
                }
                $(this).siblings().removeClass('selected');
                if($(this).text()=='我的支出'){
                    $('#myincome').css("display","block");
                    $('#pay').css("display","none");
                    type = '#myincome';
                    cate = '1';
                    doClss ='dropload-down1';
                    $('.dropload-down1').remove();
                }
                else{
                    $('#pay').css("display","block");
                    $('#myincome').css("display","none");
                    type = '#pay';
                    cate = '2';
                    doClss ='dropload-down2';
                    $('.dropload-down2').remove();
                }
            }
    );



    $(".titleList li").click(function(){
//页数
        if(cate=='1'){
            page=dp;
        }else{
            page=zp;
        }
        $(type).dropload({
            scrollArea : window,
            autoLoad : true,//自动加载
            domDown : {
                domClass   : doClss,
                domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
            },
            loadDownFn : function(me){
                page++;
                if(cate=='1'){
                    dp=page;
                }else{
                    zp=page;
                }
                //window.history.pushState(null, document.title, window.location.href);
                var result = '';
                $.ajax({
                    type: 'GET',
                    url:getBaseUrl()+'/web.php/user/integral_data.html?page='+page+'&type='+cate,
                    dataType: 'json',
                    success: function(data){
                       // alert(data);
                      //  console.log(data);
                        var count = data.data.length;
                        if(count > 0){
                            for(var i=0; i<count; i++){
                                var time = data.data[i].create_time;
                                var date = new Date(parseInt(time) * 1000).toLocaleString();
                                result+='<div class="textItem">'
                                        +'<ul>'
                                        +'<li class="title">'+data.data[i].reason+'</li>'
                                        +'<li class="title">'+date+'</li>'
                                        +'<li class="time">变动金额:'+parseInt(data.data[i].after_score-data.data[i].before_score)/100+'</li>'
                                        +'</ul>'
                                        +'</div>'
                                ;
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.'+doClss).before(result);
                            var lazyloadImg = new LazyloadImg({
                                el: '.weui-updown [data-img]', //匹配元素
                                top: 50, //元素在顶部伸出长度触发加载机制
                                right: 50, //元素在右边伸出长度触发加载机制
                                bottom: 50, //元素在底部伸出长度触发加载机制
                                left: 50, //元素在左边伸出长度触发加载机制
                                qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                load: function(el) {
                                    el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                },
                                error: function(el) {

                                }
                            });
                            //
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },0);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.lock();
//                        me.noData();
//                        me.resetload();
                    }
                });
            }
        });
    });
</script>
{/block}